<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>商品收藏</title>

    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{/assets/images/Shop.ico}">

    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">


</head>

<body>
<div th:include="head :: headname"></div>
<div class="section">

    <!-- Breadcrumb Area Start -->
    <div class="breadcrumb-area bg-primary">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li>
                        <a th:href="@{/goods/index}"><i class="fa fa-home"></i> </a>
                    </li>
                    <li class="active">商品收藏</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

</div>
<!-- Breadcrumb Section End -->

</div>
<!-- Breadcrumb Section End -->

<!-- Shopping Cart Section Start 000 -->
<div class="section section-margin">
    <div class="container">
        <div class="row">
            <div th:replace="leaf :: leafname"></div>

            <div class="col-9">
                <!-- Cart Table Start -->
                <div class="cart-table table-responsive">
                    <table class="table table-bordered">

                        <!-- Table Head Start -->
                        <thead>
                        <tr>
                            <th colspan="3">
                                <span><select
                                        style="outline: none;border: none;background-color: rgb(0,196,204);text-align: center"
                                        onchange="timeData(this)">
                                    <option th:if="${time}==0 " selected value="0">全部收藏</option>
                                    <option th:if="${time}==2 " selected value="2">近3个月收藏</option>
                                    <option th:if="${time}==1 " selected value="1">今年内</option>
                                    <option th:if="${time} ne 0 " value="0">全部收藏</option>
                                    <option th:if="${time} ne 2 " value="2">近3个月收藏</option>
                                    <option th:if="${time} ne 1" value="1">今年内</option>
                                </select></span>
                                      <span style="text-align:left;margin-left: 10px">收藏列表</span>
                            </th>

                            <th class="pro-thumbnail">商品名称</th>
                            <th class="pro-price">品牌</th>
                            <th style="width: 50px">价格</th>
                            <th class="pro-subtotal">操作</th>
                        </tr>
                        </thead>

                        <tbody th:each="var: ${products}" th:with="index=${varStat.index}">
                        <tr>
                            <td colspan="7" style="height: 1px;border: none"></td>
                        </tr>
                        <tr style="background-color: rgb(0,196,204);">
                            <td colspan="7" style="text-align: left;color: white">
                                &emsp;时间：<span
                                    th:text="${#dates.format(collects.get(index).getCollectTime(),'yyyy-MM-dd HH:mm:ss')}"></span>
                                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;玩具商城logo
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="pro-thumbnail">
                                <div style="float: left;width: 100px"><a href="#">
                                    <img th:src="@{ ${var.pic} }"
                                         alt="Product" width="100"/> </a></div>&emsp;&emsp;&emsp;&emsp;&emsp;
                                &emsp;&emsp;<div style="width: 300px;margin-top: 25px"><a href="#" style="width: 200px">
                                <!--111-->
                                <span th:text="${var.name}"
                                      style="display:inline-block;vertical-align: middle; text-overflow: ellipsis;white-space: normal;width: 100px"></span></a>
                            </div>
                            </td>

                            <td><p style="width: 180px;text-overflow: ellipsis;white-space: normal"><a
                                    th:text="${var.subTitle}" href="#"></a></p></td>
                            <td class="pro-price" rowspan="1" th:text="${var.brandName}"></td>
                            <td class="pro-price" rowspan="1">￥
                                <span th:text="${var.price}"> </span></td>

                            <td class="pro-subtotal" rowspan="1">
                                <p><a th:href="'delcollect?id='+${collects.get(index).id}"
                                      style="padding: 5px 10px 5px 10px;color: red;border: 1px solid red"
                                      oid="30">取消收藏</a></p>

                            </td>

                        </tr>
                        </tbody>
                        <!-- Table Body End -->

                    </table>
                </div>

                <div class="row">
                    <div class="col-12">
                        <!--shop toolbar start-->
                        <div class="toolbar_wrapper mt-8 border-top pt-8">

                            <!-- Shopt Top Bar Right Start -->
                            <div class="blog-top-bar-right d-flex justify-content-center">
                                <nav>
                                    <ul class="pagination">
                                        <li class="page-item disabled upPage">
                                            <a class="page-link rounded-0" href="#" aria-label="Previous"
                                               style="border: 1px solid rgb(0,196,204)">
                                                <span aria-hidden="true">上一页</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="page-link active" href="#"
                                               style="border: 1px solid rgb(0,196,204);border-left: none">...</a>
                                        </li>
                                        <li class="pageNum">
                                            <a class="page-link active pageNum" href="#"
                                               style="border: 1px solid rgb(0,196,204);border-left: none">1</a>
                                        </li>
                                        <li>
                                            <a class="page-link active" href="#"
                                               style="border: 1px solid rgb(0,196,204);border-left: none">...</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link rounded-0 nextPage" href="#" aria-label="Next"
                                               style="border: 1px solid rgb(0,196,204)">
                                                <span aria-hidden="true">下一页</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                            <!-- Shopt Top Bar Right End -->

                        </div>
                        <!--shop toolbar end-->
                        <!-- 后台响应类型监听 -->
                        <div th:text="${msg}" id="msg" style="display:none"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- Shopping Cart Section End -->

<!-- Footer Section Start -->
<div th:replace="footer :: footerS"></div>
<!-- Footer Section End -->


<!-- Mobile Menu Start -->
<div class="mobile-menu-wrapper">
    <div class="offcanvas-overlay"></div>

    <!-- Mobile Menu Inner Start -->
    <div class="mobile-menu-inner">

        <!-- Button Close Start -->
        <div class="offcanvas-btn-close">
            <i class="pe-7s-close"></i>
        </div>
        <!-- Button Close End -->

        <!-- Mobile Menu Inner Wrapper Start -->
        <div class="mobile-menu-inner-wrapper">
            <!-- Mobile Menu Search Box Start -->
            <div class="search-box-offcanvas">
                <form>
                    <input class="search-input-offcanvas" type="text" placeholder="Search product...">
                    <button class="search-btn"><i class="pe-7s-search"></i></button>
                </form>
            </div>
            <!-- Mobile Menu Search Box End -->

            <!-- Mobile Menu Start -->
            <div class="mobile-navigation">
                <nav>
                    <ul class="mobile-menu">
                        <li class="has-children">
                            <a href="#">Home <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown" style="display: none;">
                                <li><a href="index.html">Home One</a></li>
                                <li><a href="index-2.html">Home Two</a></li>
                                <li><a href="index-3.html">Home Three</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown" style="display: none;">
                                <li><a href="shop.html">Shop Grid</a></li>
                                <li><a href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                <li><a href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                <li><a href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                <li><a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                <li><a href="obligation.html">Wishlist</a></li>
                                <li><a href="cart.html">Shopping Cart</a></li>
                                <li><a href="checkout.html">Checkout</a></li>
                                <li><a href="compare.html">Compare</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown" style="display: none;">
                                <li><a href="single-product.html">Single Product</a></li>
                                <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                <li><a href="single-product-group.html">Single Product Group</a></li>
                                <li><a href="single-product-normal.html">Single Product Normal</a></li>
                                <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                <li><a href="single-product-gallery-left.html">Gallery Left</a></li>
                                <li><a href="single-product-gallery-right.html">Gallery Right</a></li>
                                <li><a href="single-product-tab-style-left.html">Tab Style Left</a></li>
                                <li><a href="single-product-tab-style-right.html">Tab Style Right</a></li>
                                <li><a href="single-product-sticky-left.html">Sticky Left</a></li>
                                <li><a href="single-product-sticky-right.html">Sticky Right</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown" style="display: none;">
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>
                                <li><a href="faq.html">Faq</a></li>
                                <li><a href="error-404.html">Error 404</a></li>
                                <li><a href="my-account.html">My Account</a></li>
                                <li><a href="login.html">Loging | Register</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown" style="display: none;">
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                <li><a href="blog-details.html">Blog Details</a></li>
                                <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                            </ul>
                        </li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <!-- Mobile Menu End -->

            <!-- Language, Currency & Link Start -->
            <div class="offcanvas-lag-curr mb-6">
                <div class="header-top-lan-curr-link">
                    <div class="header-top-lan dropdown">
                        <h4 class="title">Language:</h4>
                        <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i
                                class="fa fa-angle-down"></i></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="dropdown-item" href="#">English</a></li>
                            <li><a class="dropdown-item" href="#">Japanese</a></li>
                            <li><a class="dropdown-item" href="#">Arabic</a></li>
                            <li><a class="dropdown-item" href="#">Romanian</a></li>
                        </ul>
                    </div>
                    <div class="header-top-curr dropdown">
                        <h4 class="title">Currency:</h4>
                        <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="dropdown-item" href="#">USD</a></li>
                            <li><a class="dropdown-item" href="#">Pound</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Language, Currency & Link End -->

            <!-- Contact Links/Social Links Start -->
            <div class="mt-auto bottom-0">

                <!-- Contact Links Start -->
                <ul class="contact-links">
                    <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789</a></li>
                    <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                    <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span></li>
                </ul>
                <!-- Contact Links End -->

                <!-- Social Widget Start -->
                <div class="widget-social">
                    <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                    <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                    <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                    <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                    <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                </div>
                <!-- Social Widget Ende -->
            </div>
            <!-- Contact Links/Social Links End -->
        </div>
        <!-- Mobile Menu Inner Wrapper End -->

    </div>
</div>


<script th:src="@{assets/js/vendor.min.js}"></script>
<script th:src="@{assets/js/plugins.min.js}"></script>

<!--Main JS-->
<script th:src="@{assets/js/main.js}"></script>
<script>
    function timeData(obj) {
        var time = obj.value;
        console.info(time);
        location.href = "/order/collect?time=" + time;
    }
</script>
<script>
    $(document).ready(function () {
        var message = $("#msg").html();
        if ("200" == message) {
            location.replace("collect");
            alert("已取消收藏！");
        }
        if ("400" == message){
            alert("取消收藏失败，请稍后再尝试！");
            location.replace("collect");
        }
        $("#msg").html(0);
    });
</script>
</body>
</html>